
class BaseUI {
  constructor(data = {}) {
    this.props = Object.assign({},data);
  }

  render(){
    const html = this._render();
    const container = document.createElement("div");
    container.insertAdjacentHTML("afterBegin",html);
    const oldelement = this.element;
    this.element = container.querySelector(":first-child");
    this._bindListener(this.element);
    if (oldelement) {
      oldelement.insertAdjacentElement("afterEnd",this.element);
      oldelement.remove();
    }
    return this.element;
    // return container;
  }

  _render(){
    throw new Error("must implement _render method")
  }

  _bindListener(element){

  }
}

class Box extends BaseUI {
  constructor() {
    super();
    this.props.str = "";
  }

  click(){
    this.props.str +="x";
    this.props.charNum = 6;
    this.render();
  }
  _render(){
    return `
    <div>
    iiiik ${this.props.str}
    </div>
    `
  }

  _bindListener(element){
    // element.addEventListener("click",function(event){
    //   // event.target.style.background ="red";
    //   element.insertAdjacentHTML("beforeEnd","x");
    // })
  }
}

class List extends BaseUI {
  constructor(str){
    super({str:str,charNum:6,currentIndex:0});
  }

  up(){
    if (!this.props.currentIndex) {
      this.props.currentIndex = this.props.str.length -1;
    }else {
      --this.props.currentIndex;
    }
    this.render();
  }

  down(){
    if (this.props.currentIndex===this.props.str.length -1) {
      this.props.currentIndex = 0;
    }else {
      ++this.props.currentIndex;
    }
    this.render();
  }
  _render(){

    let str =  this.props.str;
    let charNum = this.props.charNum;
    let lis = "";
    for(let i=0;i<str.length;i++){
      let char = str[i];
      let str2 = "";
      for(let i=0;i<charNum;i++){
        str2 +=char;
      }
      lis +=`<li class="${this.props.currentIndex === i ?"bg":""}">${str}</li>`
    }
    console.log(lis);
    return `
    <ul>
      ${lis}
    </ul>
    `
  }
}

const list = new List("123456");
document.body.appendChild(list.render());

function cool(){
  const i = Math.round(Math.random()*10);
  if (i>5) {
    list.up();

  }else {
    list.down();
  }
  setTimeout(cool,1000);
}

cool();
  // const box = new Box();
  // document.body.appendChild(box.render());
  // const button = document.querySelector("button");
  // button.onclick = function(){
  //   box.click();
  // }
